<template>
    <el-container>
        <el-main class="popup_content">
            <el-form ref="editPromotion" :model="editPromotion" :rules="rules" label-width="100px">
                <div style="display: flex">
                    <el-form-item label="起止日期">
                        <el-date-picker style="width: 400px" v-model="dateTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="活动描述">
                        <el-input style="width: 400px" v-model="editPromotion.introduction" placeholder="请输入促销说明"></el-input>
                    </el-form-item>
                </div>
                <div style="display: flex">
                    <el-form-item label="消费金额满" prop="minimumPrice" v-if="editPromotion.type===4||editPromotion.type===5||editPromotion.type===6||editPromotion.type===3||editPromotion.type===1">

                        <el-input style="width: 200px" v-model="editPromotion.minimumPrice" type="number" @mousewheel.native.prevent @DOMMouseScroll.native.prevent placeholder="如消费满100元生效"></el-input>
                        <span style="white-space: nowrap;color:#333333;font-size:14px;font-weight:700">包邮</span>
                    </el-form-item>
                </div>

                <div>
                    <el-form-item label="参与会员">
                        <el-select style="width: 400px" v-model="vipsvalue" multiple filterable allow-create default-first-optionplaceholder="请选择可参与会员" @change="vipschanges">
                            <el-option v-for="item in vipslist" :key="item.id" :label="item.name" :value="item.vip"></el-option>
                        </el-select>
                    </el-form-item>
                </div>

                <div>
                    <el-form-item label="参与城市">
                        <queryCascader style="width: 400px" @queryCascaderclick=queryCascaderclick :areaList='editPromotion.areaList'></queryCascader>
                    </el-form-item>
                </div>
                <el-form-item>
                    <el-col>
                        <el-button type="primary" :loading="clicked" @click="updatePromotion('editPromotion')">确 定</el-button>
                    </el-col>
                </el-form-item>
            </el-form>
        </el-main>
    </el-container>
</template>

<script>
import { EventBus } from "@/api/eventBus";
import SingleUpload from "@/components/Upload/singleUpload";
import { find, update } from "@/api/promotion";
import { list } from "@/api/vip";
import queryCascader from "@/components/Query/queryCascader";
export default {
    name: "freeshipping-edit",
    data() {
        return {
            vipsvalue: [],
            vipslist: [],
            dateTime: [],
            clicked: false,
            giftTypeList: [],
            editPromotion: {
                id: "",
                agioRate: "",
                amount: "",
                firsted: false,
                giftType: "",
                gifts: [
                    {
                        promotionId: "",
                        giftId: "",
                        availableQuantity: 0,
                        giftName: "",
                        quantity: 0,
                    },
                ],
                introduction: "",
                stock: 0,
                minimumPrice: "",
                modifyDate: "",
                orders: 0,
                overlying: false,
                thumbnail: "",
                title: "",
                type: 6,
                areaList: "",
            },
            rules: {
                type: [
                    {
                        required: true,
                        message: "请输入选择类型",
                        trigger: "change",
                    },
                ],
                agioRate: [
                    {
                        required: true,
                        message: "请输入满减比例",
                        trigger: "blur",
                    },
                ],
                amount: [
                    { required: true, message: "请输入金额", trigger: "blur" },
                ],
                title: [
                    {
                        required: true,
                        message: "请输入促销标题",
                        trigger: "blur",
                    },
                ],
                minimumPrice: [
                    { required: true, message: "请输入数量", trigger: "blur" },
                ],
                memo: [
                    {
                        required: true,
                        message: "请输入等级描述",
                        trigger: "blur",
                    },
                ],
                enterpriseId: [
                    {
                        required: true,
                        message: "请输入所属企业",
                        trigger: "blur",
                    },
                ],
                integer: [
                    {
                        required: true,
                        message: "请输入优先级",
                        trigger: "blur",
                    },
                ],
                introduction: [
                    {
                        required: true,
                        message: "请输入促销说明",
                        trigger: "blur",
                    },
                ],
            },
        };
    },
    watch: {
        // 路由地址不变的情况下,如果id变化则重新获取数据
        $route(newVal, oldVal) {
            console.log(newVal);
            if (
                newVal.name == "freeshipping-edit" &&
                newVal.query.id != this.id
            ) {
                this.findPromotion();
            }
        },
    },
    methods: {
        vipschanges(val) {
            this.editPromotion.vips = "";
            val.forEach((item) => {
                this.editPromotion.vips += item;
            });
        },
        loadVip() {
            list().then((res) => {
                console.log(res);
                this.vipslist = res.data.data;
            });
        },
        addGift(type) {
            type === "添加"
                ? this.$refs.child.add()
                : this.$refs.editChild.add();
        },
        addCoupon(type) {
            type == "添加"
                ? this.$refs.couponAdd.add()
                : this.$refs.editCouponAdd.add();
        },
        updatePromotion(editPromotion) {
            this.$refs[editPromotion].validate((valid) => {
                if (valid) {
                    this.clicked = true;
                    var editPromotion = {
                        id: this.editPromotion.id,
                        agioRate: this.editPromotion.agioRate,
                        amount: this.editPromotion.amount,
                        stock: this.editPromotion.stock,
                        firsted: this.editPromotion.firsted,
                        giftType: this.editPromotion.giftType,
                        gifts: [],
                        beginDate: "",
                        endDate: "",
                        status: 0,
                        introduction: this.editPromotion.introduction,
                        minimumPrice: this.editPromotion.minimumPrice,
                        modifyDate: new Date(),
                        orders: this.editPromotion.orders,
                        overlying: this.editPromotion.overlying,
                        thumbnail: this.editPromotion.thumbnail,
                        title: this.editPromotion.title,
                        type: this.editPromotion.type,
                        vips: this.editPromotion.vips,
                        areaList: this.editPromotion.areaList,
                    };
                    if (
                        this.editPromotion.type != 0 &&
                        this.editPromotion.type != 1 &&
                        this.editPromotion.type != 2 &&
                        this.editPromotion.type != 5
                    ) {
                        this.giftTypeList = [];
                    } else {
                        if (this.editPromotion.giftType === 0) {
                            if (
                                this.$refs.editChild.gifts.length &&
                                this.$refs.editChild.gifts.length > 0
                            ) {
                                this.giftTypeList = this.$refs.editChild.gifts;
                            } else {
                                this.giftTypeList = [];
                            }
                        } else if (this.editPromotion.giftType === 1) {
                            if (
                                this.$refs.editCouponAdd.coupons &&
                                this.$refs.editCouponAdd.coupons.length > 0
                            ) {
                                this.giftTypeList =
                                    this.$refs.editCouponAdd.coupons;
                            } else {
                                this.giftTypeList = [];
                            }
                        }
                    }
                    editPromotion.gifts = this.giftTypeList;
                    if (this.dateTime.length > 0) {
                        editPromotion.beginDate = this.dateTime[0];
                        editPromotion.endDate = this.dateTime[1];
                    }
                    if (this.editPromotion.type === 6) {
                        editPromotion.title =
                            "满" + editPromotion.minimumPrice + "包邮";
                    } else if (this.editPromotion.type === 3) {
                        editPromotion.title =
                            "满" +
                            editPromotion.minimumPrice +
                            "减" +
                            editPromotion.amount;
                    } else if (this.editPromotion.type === 4) {
                        editPromotion.title =
                            "满" +
                            editPromotion.minimumPrice +
                            "打" +
                            editPromotion.agioRate +
                            "折";
                    }
                    console.log(editPromotion);
                    update(editPromotion)
                        .then((response) => {
                            this.$store
                                .dispatch("tagsView/delView", this.$route)
                                .then(({ visitedViews }) => {
                                    this.$router.push({
                                        path: "/freeshipping/list",
                                    });
                                });
                            EventBus.$emit("freeshipping-edit", response.data);
                        })
                        .catch((error) => {
                            this.editVisible = false;
                            console.log("error");
                        });
                } else {
                    this.editVisible = false;
                }
            });
        },
        findPromotion() {
            this.editPromotion.id = this.$route.query.id;
            find(this.editPromotion.id).then((response) => {
                this.editPromotion = response.data.promotion;
                this.dateTime.push(this.editPromotion.beginDate);
                this.dateTime.push(this.editPromotion.endDate);
                console.log(this.editPromotion);
                this.vipsvalue = this.editPromotion.vips.split("");
                let array = [];
                this.vipsvalue.forEach((item) => {
                    array.push(Number(item));
                });
                this.vipsvalue = array;
            });
        },
        queryCascaderclick(data) {
            this.editPromotion.areaList = data;
        },
    },
    created() {
        this.loadVip();
        this.findPromotion();
    },
    filters: {
        watchType(val) {
            const typeName = [
                "弹屏活动",
                "消费送",
                "扫码活动",
                "满减",
                "满折",
                "满赠",
                "满包邮",
                "充值送",
            ];
            return typeName[val];
        },
        watchAmountType(val) {
            if (val == 3) {
                return "满减金额";
            } else if (val == 7) {
                return "充值金额";
            }
        },
    },
    components: {
        SingleUpload,
        queryCascader,
    },
};
</script>

<style scoped>
</style>
